<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增景点信息</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
</head>
<body class="container py-4">
<div class="d-flex align-items-center mb-4">
    <h1 class="mb-0">新增景点信息</h1>
    <span class="ms-3 text-secondary"><i class="fa fa-info-circle"></i> 请填写景点基础信息</span>
</div>

<!-- 新增景点表单 -->
<form action="/tourismsystem/saveOne.spot" method="post" class="row g-4 border p-4 rounded-3 bg-light">
    <!-- 新增的sight_id字段 -->
    <div class="col-12">
        <label class="form-label fw-medium">景点ID <span class="text-danger">*</span></label>
        <input type="text" name="sight_id" class="form-control" required
               autocomplete="off" placeholder="该id自动生成" readonly="readonly"id="sight_id">
    </div>
    <div class="col-md-6">
        <label class="form-label fw-medium">景点名称 <span class="text-danger">*</span></label>
        <input type="text" name="sight_name" class="form-control"  required
               autocomplete="off" id="sight_name">
        <span style="color: red">*</span><span id="message0"style="color: red;" class="message"></span>
    </div>

    <div class="col-md-6">
        <label class="form-label fw-medium">所在城市 <span class="text-danger">*</span></label>
        <input type="text" name="city" class="form-control"  required
               autocomplete="off" id="city">
    </div>

    <div class="col-12">
        <label class="form-label fw-medium">景点介绍 <span class="text-danger">*</span></label>
        <textarea name="introduction" class="form-control" rows="4"
                  placeholder="请简要描述景点特色、历史等信息..." required id="introduction"></textarea>
    </div>

    <div class="col-md-8">
        <label class="form-label fw-medium">封面图URL <span class="text-danger">*</span></label>
        <div class="input-group">
            <input type="url" name="img_path" class="form-control"
                   placeholder="例如：https://example.com/img.jpg" required id="img_path">
            <span class="input-group-text">
                    <i class="fa fa-image text-muted"></i>
                </span>
        </div>
        <div class="form-text text-muted mt-1">支持jpg、png格式的网络图片地址</div>
    </div>

    <div class="col-md-4 d-flex align-items-end">
        <div class="form-check">
            <input type="checkbox" name="is_hot" class="form-check-input" id="isHot">
            <label class="form-check-label" for="isHot">标记为热门景点</label>
        </div>
    </div>

    <div class="col-12 pt-2 border-top">
        <div class="d-flex gap-3 justify-content-end">
            <a href="/tourismsystem/toList.spot" class="btn btn-secondary">
                <i class="fa fa-arrow-left me-1"></i> 返回列表
            </a>
            <button type="submit" class="btn btn-success" id="btn1">
                <i class="fa fa-save me-1"></i> 保存景点
            </button>
            <button type="button" class="btn btn-primary" id="btn2" onclick="showNextStepTips()">
                <i class="fa fa-arrow-right me-1"></i> 下一步（编辑详情）
            </button>
        </div>
    </div>
</form>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(function () {
        var params=new URLSearchParams(window.location.search);
        var sight_id= params.get("sight_id");
        if (sight_id!=null&&sight_id!="") {
            var url = "/tourismsystem/queryById.spot";
            var jsonPram = {
                "sight_id": sight_id
            }
            $.post(url, jsonPram, function (data) {
                var jsonObj = JSON.parse(data);
                if (jsonObj) {
                    $("#sight_id").val(jsonObj.sight_id);
                    $("#sight_name").val(jsonObj.sight_name);
                    $("#city").val(jsonObj.city);
                    $("#introduction").val(jsonObj.introduction);
                    $("#img_path").val(jsonObj.img_path);
                    if (jsonObj.is_hot == 1)
                        $("isHot").prop("check", true);
                    else
                        $("isHot").prop("check", false);
                }
                $("#btn1").prop("disabled", true);
            })
        }
            $("#sight_name").change(function () {
                var url="/tourismsystem/checkName.spot"
                var paramSight_name={
                    "sight_name":$(this).val()
                };
                $.post(url,paramSight_name,function (data) {
                    var flagObj=JSON.parse(data);
                    if (flagObj.flag==0){
                        $("#message0").empty();
                        $("#btn1").prop("disabled",false)
                    }else {
                        $("#message0").empty().html("对不起，该景点已存在");
                        $("#btn1").prop("disabled",true)
                    }
                })
            })
        $("#btn2").click(function () {
            var url="/tourismsystem/toEdit.detail"

        })
    })
</script>
</body>
</html>
